<template>
    <el-dialog v-model="dialogFormVisible" @open="dialogOpen" @closed="dialogClose" title="添加用户">
        <el-form :model="form">
            <el-form-item label="账号" hide-required-asterisk>
                <el-input v-model="form.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="手机">
                <el-input v-model="form.phone" autocomplete="off" />
            </el-form-item>
            <el-form-item label="昵称">
                <el-input v-model="form.nickname" autocomplete="off" />
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="form.email" autocomplete="off" />
            </el-form-item>
            <el-form-item label="国家">
                <el-input v-model="form.country" autocomplete="off" />
            </el-form-item>
            <el-form-item label="省份">
                <el-input v-model="form.province" autocomplete="off" />
            </el-form-item>
            <el-form-item label="性别">
                <el-input v-model="form.sex" autocomplete="off" />
            </el-form-item>
            <el-form-item label="城市">
                <el-input v-model="form.city" autocomplete="off" />
            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="handleAdd">
                    添加
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script setup>
import { reactive, ref, watch } from 'vue'
// 引入添加用户的接口
import * as api from "@/api/permission"
let dialogFormVisible = ref(false)
// 定义组件以后接收的数据
let props = defineProps({
    // 弹框的显示与隐藏
    modelValue: {
        type: Boolean,
        default: false
    },
})


// 定义组件将来点击确定和取消触发的方法
let emit = defineEmits(['reacquire', 'cancel', 'update:modelValue'])
// 定义弹窗打开触发的事件
let dialogOpen = () => {
    // 清空表单的数据
    form.username = ""
    form.password = ""
    form.phone = ""
    form.nickname = ""
    form.email = ""
    form.country = ""
    form.province = ""
    form.sex = ""
    form.city = ""
}
// 弹窗关闭触发的事件
let dialogClose = () => {

    // 关闭弹窗
    dialogFormVisible.value = false
    // 触发父组件的更新数据
    emit('update:modelValue', dialogFormVisible.value)
}
// 监听props的modelValue的值
watch(() => props.modelValue, (newVal) => {
    // 判断props的modelValue的值是否和当前组件的dialogFormVisible的值一样,如果不一样,就同步
    // console.log(newVal);
    if (newVal !== dialogFormVisible.value) {
        dialogFormVisible.value = newVal
    }
})
// 表格中的数据
const form = reactive({
    //用户名 必填
    username: "",
    // 密码 必填
    password: "",
    // 手机号
    phone: "",
    // 昵称 
    nickname: "",
    // 邮箱
    email: "",
    // 国家
    country: "",
    // 省份
    province: "",
    // 性别
    sex: "",
    // 城市 必填
    city: ""
})


// 点击添加按钮触发的事件
let handleAdd = async () => {
    
    let res = await api.addUserPermissionApi({username:form.username,password:form.password,city:form.city,phone:form.phone})
    // console.log(res);

    // console.log(form);
    // 触发父组件的获取角色事件
    emit('reacquire')
    // 关闭弹窗
    dialogFormVisible.value = false
}
</script>